<template>
  <div id="app-jobs">
    <div class="one-block-1">
      <span> 1. 任务 </span>
    </div>
    <div class="one-block-2">
      <a-space>
        <a-button @click="runJob(1, 'create')">开始任务</a-button>
        进度: {{ progress1 }} , 进程pid: {{ progress1_pid }}
        <a-button @click="runJob(1, 'pause')">暂停</a-button>
        <a-button @click="runJob(1, 'resume')">恢复</a-button>
        <a-button @click="runJob(1, 'close')">关闭</a-button>
      </a-space>
    </div>
  </div>
</template>
<script setup>
import { ipcApiRoute } from "@/api";
import { ipc } from "@/utils/ipcRenderer";
import { ref, onMounted } from "vue";

const progress1 = ref(0);
const progress1_pid = ref(0);

onMounted(() => {
  init();
});

function init() {
  // 避免重复监听, 或者将 on 功能写到一个统一的地方, 只加载一次
  ipc.removeAllListeners(ipcApiRoute.douyin.timerJobProgress);

  // 监听任务进度
  ipc.on(ipcApiRoute.douyin.timerJobProgress, (event, result) => {
    const { jobId, pid, number } = result;
    switch (jobId) {
      case 1:
        progress1.value = number;
        progress1_pid.value = pid == 0 ? pid : progress1_pid.value;
        break;
    }
  });
}

function runJob(jobId, operation) {
  const params = {
    jobId,
    type: "timer",
    action: operation,
  };
  ipc.invoke(ipcApiRoute.douyin.someJob, params).then((data) => {
    if (operation != "create") return;
    switch (data.jobId) {
      case 1:
        progress1_pid.value = data.result.pid;
        break;
    }
  });
}
</script>
<style lang="less" scoped>
#app-jobs {
  padding: 0px 10px;
  text-align: left;
  width: 100%;
  .one-block-1 {
    font-size: 16px;
    padding-top: 10px;
  }
  .one-block-2 {
    padding-top: 10px;
  }
}
</style>
